<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Carousel Template · Bootstrap</title>
    <meta content="课程教学实例" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <!--将360默认为极速模式打开-->
    <meta name="renderer" content="webkit" >
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>

<div class="container to-top">
    <nav class="navbar navbar-inverse" >
        <div class="navbar-inner">
            <div class="">
                <!--<a class="brand" href="#">Title</a>-->
                <ul class="nav">
                    <li class="active">
                        <a href="./index.html">Project name</a>
                    </li>
                    <li class="">
                        <a href="./index-started.html">Home</a>
                    </li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown open">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>






<div id="sd">
    <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!--Carousel items-->
        <div class="carousel-inner">
            <div class="active item item-1">
                <!--<img class="car-img" src="http://v2.bootcss.com/assets/img/examples/slide-01.jpg" alt=""/>-->
                <div class="container">
                    <h1 class="content">Example headline.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <button class="btn btn-primary btn-large">Sign up today</button>
                </div>
            </div>
            <div class="item  item-2">
                <!--<img class="car-img" src="http://v2.bootcss.com/assets/img/examples/slide-02.jpg" alt=""/>-->
                <div class="container">
                    <h1 class="content">Another example headline.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <button class="btn btn-primary btn-large">Learn more</button>
                </div>
            </div>
            <div class="item item-3">
                <!--<img class="car-img" src="http://v2.bootcss.com/assets/img/examples/slide-03.jpg" alt=""/>-->
                <div class="container">
                    <h1 class="content">One more for good measure.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <button class="btn btn-primary btn-large">Browse gallery</button>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

</div>







<div class="container" style="margin-top:300px">

    <!-- Three columns of text below the carousel -->
    <div class="row">
        <div class="span4">
            <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="" style="width: 140px; height: 140px;">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
            <p><a class="btn" href="#">View details »</a></p>
        </div><!-- /.span4 -->
        <div class="span4">
            <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="" style="width: 140px; height: 140px;">
            <h2>Heading</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn" href="#">View details »</a></p>
        </div><!-- /.span4 -->
        <div class="span4">
            <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="" style="width: 140px; height: 140px;">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn" href="#">View details »</a></p>
        </div><!-- /.span4 -->
    </div><!-- /.row -->


    <div>
    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image pull-right" src="./img/1.png">
        <h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>

    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image pull-left" src="./img/2.png">
        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>

    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image pull-right" src="./img/3.png">
        <h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>

    <hr class="featurette-divider">
    </div>

    <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>© 2013 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
    </footer>

</div>

<div class="bo">

</div>


<script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>


</body>
</html>